<template>
    <h2>房型录入</h2>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="info.Room_TypeName">
            </td>
        </tr>
        <tr>
            <td>预览图片</td>
            <td>
                <input type="file" @change="UpLoad">
                <img style="width: 70px;height: 80px;" :src="info.Room_TypeImg">
            </td>
        </tr>
        <tr>
            <td>房型大小面积</td>
            <td>
                <input type="number" v-model="info.Room_TypeMianJi">
            </td>
        </tr>
        <tr>
            <td>门市价</td>
            <td>
                <input type="number" v-model="info.Room_TypePrice">
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="number" v-model="info.Room_TypeNum">
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
                <textarea v-model="info.Room_TypeInfo"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="录入" @click="SaveData">
            </td>
        </tr>
        
    </table>
</template>
<script setup lang="ts">
import axios from "axios";
import { onMounted ,ref} from "vue";

const info=ref({
    Room_TypeName:"",
    Room_TypeImg:"",
    Room_TypeMianJi:"",
    Room_TypePrice:"",
    Room_TypeNum:"",
    Room_TypeInfo:""
})



const UpLoad=(e:any)=>{

    var file=e.target.files[0];
    var fd=new FormData();

    fd.append("img",file);

    axios.post('https://localhost:7023/api/Files/FilesUpLoad',fd)
    .then(res=>{
        if(res.data==-1){
            alert("图片类型不对");
        }
        else if(res.data==-2){
            alert("不能超过2MB");
        }
        else{
            info.value.Room_TypeImg=res.data
        }

    })


}


const SaveData=()=>{

    if(info.value.Room_TypeName==""){
        alert("房型名称不能为空");
        return;
    }
    if(info.value.Room_TypePrice==""){
        alert("房型门市价不能为空");
        return;
    }
    if(info.value.Room_TypeNum==""){
        alert("可住人数不能为空");
        return;
    }
    if(info.value.Room_TypeImg==""){
        alert("图片不能为空");
        return;
    }
    if(info.value.Room_TypeInfo==""){
        alert("房型介绍不能为空");
        return;
    }



    axios.post('https://localhost:7023/api/RoomType/AddRoomType',info.value)
    .then(res=>{
        if(res.data>0){
            alert("录入成功");

        }
        else if(res.data==-1){
            alert("已经存在")

        }
        else{
            alert("录入失败");
        }
    })
}


</script>